<!--Section heading-->
<div class="row animated fadeInRight">
  <!--Grid column-->
  <div class="col-lg-3 mt-5 mx-auto">
    <mdb-card cascade="true" narrower="true">
      <!--Card image-->
      <div
        class="view view-cascade gradient-card-header peach-gradient narrower z-depth-2 rounded-lg  py-2 m-3 mt-n4 text-center">
        <div class="m-3">
          <h4 class="white-text">个人信息</h4>
        </div>
      </div>
      <!--/Card image-->
      <mdb-card-body>
        <!--Body-->

        <div class="row mt-2 ml-5 mr-5">
          <!-- 姓名 -->
          <div class="col">
            <label for="formName">姓名</label>
            <input type="text" id="formName" class="form-control" disabled [(ngModel)]="user.name">
          </div>
        </div>

        <div class="row mt-2 ml-5 mr-5">
          <!-- uid -->
          <div class="col px-40">
            <label for="formId">用户编号</label>
            <input type="text" id="formId" class="form-control" disabled [(ngModel)]="user.id">
          </div>
        </div>

        <div class="row mt-2 ml-5 mr-5">
          <!-- 身份证号 -->
          <div class="col px-40">
            <label for="formId">身份证号</label>
            <input type="text" id="formIdCard" class="form-control" disabled [(ngModel)]="user.idCard">
          </div>
        </div>

        <div class="row mt-2 ml-5 mr-5">
          <!-- 邮箱 -->
          <div class="col px-20">
            <label for="formMail">邮箱</label>
            <input type="email" id="formMail" class="form-control" (ngModelChange)="onEdit()" [(ngModel)]="user.email">
          </div>
        </div>
        <div class="row mt-2 ml-5 mr-5">
          <!-- 电话 -->
          <div class="col px-20">
            <label for="formPhone">电话</label>
            <input type="text" minlength="8" maxlength="11" id="formPhone" class="form-control"
                   (ngModelChange)="onEdit()" [(ngModel)]="user.phone">
          </div>
        </div>

        <!-- Regular usage -->
        <!-- <re-captcha (resolved)="resolved($event)" siteKey="YOUR_SITE_KEY"></re-captcha> -->

        <div class="text-center mt-5">
          <button mdbBtn class="btn peach-gradient" *ngIf="isEdited" mdbWavesEffect (click)="updateUserInfo();">确认修改
          </button>
        </div>

      </mdb-card-body>

    </mdb-card>
    <!--Form with header-->
    <mdb-card>


    </mdb-card>
    <!--Form with header-->

  </div>
  <!--Grid column-->
</div>
<div mdbModal #failModal="mdbModal" class="modal fade" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-notify modal-danger" role="document">
    <!--Content-->
    <div class="modal-content text-center">
      <!--Header-->
      <div class="modal-header d-flex justify-content-center">
        <p *ngIf="feedback==-1" class="heading">原密码输入错误！</p>
        <p *ngIf="feedback==0" class="heading">修改失败！</p>
        <p *ngIf="feedback==2" class="heading">意料之外的错误！</p>
      </div>
      <!--Footer-->
      <div class="modal-footer justify-content-center">
        <a type="button" mdbBtn color="danger" outline="true" class="waves-light" mdbWavesEffect data-dismiss="modal"
           (click)="failModal.hide()">确定</a>
      </div>
      <strong>若一直修改不了请联系管理员</strong>
    </div>
    <!--/.Content-->
  </div>
</div>
<div mdbModal #successModal="mdbModal" class="modal fade" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-notify modal-success" role="document">
    <!--Content-->
    <div class="modal-content text-center">
      <!--Header-->
      <div class="modal-header d-flex justify-content-center">
        <p class="heading">修改成功！</p>
      </div>
      <!--Footer-->
      <div class="modal-footer justify-content-center">
        <a type="button" mdbBtn color="success" outline="true" class="waves-light" mdbWavesEffect data-dismiss="modal"
           (click)="successModal.hide()">确定</a>
      </div>
    </div>
    <!--/.Content-->
  </div>
</div>
